<template>
    <div>
        <el-dialog title="编辑会员" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="memberFrom" :rules="rules" ref="memberRef">
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="memberFrom.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
                    <el-input v-model="memberFrom.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="memberFrom.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="memberFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editFrom">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { memberInfo, memberEdit } from '../../request/api'
import { mapActions } from 'vuex'
export default {
    props: ['isShow'],
    data() {
        return {
            formLabelWidth: '120px',
            memberFrom: {
                uid: '', //会员编号必填项
                nickname: '', //昵称
                phone: '', //手机号
                password: '',//密码
                status: 1,//状态1正常2禁用
            },
            // 规则验证
            rules: {
                nickname: [
                    { required: true, message: '请输入会员昵称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入会员手机号', trigger: 'blur' },
                ],

            },



        }
    },
    methods: {
        ...mapActions({
            getMember:'member/getMemberListAction'
        }),
        cancel() {
            this.$emit('cancel', false)
        },
        // 数据回显
        lookup(uid) {
            memberInfo({ uid }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.memberFrom = res.list
                    // this.memeberFrom.uid = uid
                    this.memberFrom.password=''
                }
            })
        },
        editFrom() {
            this.$refs.memberRef.validate(val=>{
                if(val){
                    memberEdit(this.memberFrom).then(res=>{
                        // console.log(res);
                        if(res.code==200){
                            this.$message.success(res.msg)
                            this.cancel()
                            this.getMember()
                        }else{
                            this.$message.error(res.msg)
                        }
                    })
                }
            })

        }
    },
    mounted() { 
        this.getMember()
    },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>